<template>
    <div class="verifyPage" >
        <!-- 手机/邮箱图片验证码发送 -->
        <div class="verify-container" v-if="showPage == 1">
            <div class="inputBox">
                <span  class="text sendMsgTips">填写您注册的手机号</span>
                <input class="phoneNum verificationInput"  name="" id=""  placeholder="请输入手机号" v-model="phoneNum">
                <div class="codeInput">
                    <input class="verificationInput" type='text' name="" id="" placeholder="图片验证码" v-model="imgCode">
                    <span class="codeImg" @click="getImgCode"><img :src="imgCodeUrl" alt=""></span>
                </div>
                
            </div>
            <div class="sendPart">
                <div class="commonBtn sendPhone" @click="sendPhoneCode"> 
                    <span >
                    发&nbsp;&nbsp;送
                    </span>
                </div>
            </div>    
        </div>

        <!-- 手机或邮箱验证码发送 -->
        <div class="verify-send" v-if="showPage == 2">
            <!-- 发送验证码 -->
            <div class="content">
                <span  class="text sendMsgTips">{{phoneMsg}}</span>
                <div class="codeInput">
                    <input class="verificationInput" type='text'  :placeholder="codeMsg" v-model="seccode">            
                    <input class="commonBtn repeateCodeBtn" type='button' value="重新获取" @click="reacquireCodeFun" v-if="attcode">
                    <input class="commonBtn grayBtn" type='button' :value="code_ts" v-else>
                </div>
                <div class="inputSend">
                    <input class="sureBtn commonBtn" type='button' name="" id="" value="确 定"  @click="checkPhoneCode">
                </div>
                
            </div>
        </div>

        <div class="verify-send" v-if="showPage == 3">
            <!-- 发送验证码 -->
            <div class="content">
                <span  class="text sendMsgTips">手机验证成功，填写您的新密码</span>
                <div class="codeInput">
                    <el-form :model="form" ref="form" :rules="rules" label-width="20%" class="demo-ruleForm">
                        
                        <el-form-item label="新密码"  prop="password">
                            <div class="worksInput">
                                <el-input class="elInputCom" type="password" v-model="form.password" placeholder=""></el-input>
                            </div>
                        </el-form-item>
                        <el-form-item label="重复密码"  prop="newPassword">
                            <div class="worksInput">
                                <el-input class="elInputCom" type="password" v-model="form.newPassword" placeholder=""></el-input>
                            </div>
                        </el-form-item>
                    </el-form>   
                </div>
                <div class="inputSend">
                    <input class="sureBtn commonBtn" type='button' name="" id="" value="确 定"  @click="resetPsd">
                </div>
                
            </div>
        </div>
        <span class="backSpan" @click="backToIndex"><i class="el-icon-refresh-left"></i>返回首页</span>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
    data(){
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入新密码'));
            } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'));
            } 
            else {
                callback();
            }
        };
        return{
            showPage:1,
            phoneNum:"",
            seccode:"",
            showPsd:true,
            phoneMsg:"", // 
            codeMsg:"短信验证码",
            sec:"60", // 倒计时秒数
            code_ts: '获取验证码', //倒计时提示文字
            attcode: false,  //点击获取验证码按钮判断
            seccode:"",
            timer:"", // 定时器
            imgCodeUrl:"",
            imgCode:"", // 图片验证码
            uuid:"",
            rules: { // 用户修改密码的验证规则
                password: [
                    { validator: this.$common.emptyValidate, trigger: ['blur', 'change'] }
                ],
                newPassword: [
                    { validator: validatePass, trigger: ['blur', 'change'] }
                ],
            },
            form:{
                password:"",
                newPassword:""
            }
        }
    },
    created(){
        // 获取图片验证码
        this.initImgCode()
    },
    methods:{
        ...mapMutations(['changeLogin']),
        backToIndex(){
            this.$router.push('/index')
        },
        // 初始化图片验证码
        initImgCode(){
            // 页面初始化时得到uuid
            this.uuid = this.$common.guid()
            this.getImgCode()
        },
        // 获取图片验证码
        getImgCode(){
            var _this = this
            this.$api.getImgCode(this.uuid,{responseType: "arraybuffer"})
            .then(function (response) {
                //将从后台获取的图片流进行转换
                return 'data:image/png;base64,' + btoa(
                    new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
                );
            }).then(function (data) {
                //接收转换后的Base64图片
                _this.imgCodeUrl = data;
            }).catch(function (err) {})
        },
        
        
        // 修改密码 -- 发送手机验证码
        sendPhoneCode(){ 
            if(this.phoneNum && this.imgCode){
                // 发送验证码
                const params = {
                    phone:this.phoneNum,
                    scode:this.imgCode,
                    uuid:this.uuid
                }
                
                this.$api.loginSendCode({params:params})
                .then(result=>{
                    if(result.data.success){ // 成功后
                        this.showPage = 2
                        var str = this.phoneNum.substr(0,3)+'****'+this.phoneNum.substr(7)
                        this.timeCountDown()
                        this.codeMsg = "短信验证码"
                        this.phoneMsg = `验证码已发送至手机${str}`
                    }else{
                        this.$message({center: true,message: result.data.message?result.data.message:"网络错误,请稍后再试",type: 'warning'});
                    }
                })
            }else{
                this.$message({center: true,message:"请完善信息后发送",type: 'warning'});
            }
            
        },
        // 修改密码 -- 验证手机验证码
        checkPhoneCode(){
            const params = {
                phone:this.phoneNum,
                seccode: this.seccode,
                uuid:this.uuid
            }
            this.$api.testLoginCode({params:params})
            .then(result=>{
                if(result.data.success){ // 成功后
                    this.clearTimer()
                    this.showPage = 3
                }else{
                    this.$message({center: true,message: result.data.message?result.data.message:"网络错误,请稍后再试",type: 'warning'});
                }
            })
        },
        // 修改密码 -- 重置登陆密码
        resetPsd(){
            // if
            this.$refs['form'].validate((valid) => {
                if(valid){
                    const params = {
                        password:this.form.newPassword,
                        phone:this.phoneNum
                    }
                    this.$api.resetPsd(params)
                    .then(result=>{
                        if(result.data.success){ // 成功后
                            this.$message({center: true,message:"修改成功,继续登陆",type: 'success'});
                            this.$router.push('/login')
                        }else{
                            this.$message({center: true,message: result.data.message?result.data.message:"网络错误,请稍后再试",type: 'warning'});
                        }
                    })
                }
            })
            
        },

        timeCountDown(){ // 时间倒计时
            this.timer = setInterval(() => {
                this.sec = this.sec-1
                this.code_ts = this.sec + 'S后重试'
                this.attcode = false
                if (this.sec === 0) {
                    clearInterval(this.timer)
                    this.sec = 60
                    this.code_ts = this.sec + 'S后重试'
                    this.attcode = true
                }
            }, 1000)
        },
        // 验证码验证成功后，清除定时器
        clearTimer(){
            clearInterval(this.timer)
            this.sec = 60
            this.code_ts = this.sec + 'S后重试'
            this.attcode = true
        },
        reacquireCodeFun(){ // 重新获取验证码
            this.timeCountDown();
            // 发送验证码
            this.$api.loginSendCode({params:{phone: this.phoneNum}})
            .then(result => {})
        },


    }
}
</script>

<style lang="scss" scoped>
.verifyPage{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:url('../../../images/bg003.png');
    background-repeat: no-repeat;
    background-size:100% 100%;
    .backSpan{
        position: absolute;
        right: 20px;
        bottom: 60px;
        font-size: 14px;
        color: #7B3D41;
        cursor: pointer;
    }
    .worksInput .elInputCom{
        width: 80%;
    }
    .errMsg{
        display: block;
        margin-left: 15px;
        color: red;
        font-size: 14px;
        line-height: 35px;
    }
    .verify-container{
        width:100%;
        height: 60%;
        .inputBox{
            width: 48%;
            margin-top: 22%;
            margin-left: 30%;
            span.text{
                line-height: 30px;
                color: #764147;
                font-family: 'Microsoft Yahei';
                font-weight: bold;
                font-size:16px;
                margin-left: 15px;
            }
            input{
                width: 100%;
                height: 46px;
                font-size: 18px;
                font-family: 'Microsoft Yahei';
                color: #7B3D41;
                border-radius: 23px;
                background: #fff;
                border:1px solid #78383C;
                &::-webkit-input-placeholder {
                    color: #CCB6B8;
                }
            
            }
            .codeInput{
                display: flex;
                overflow: hidden;
                margin-top: 10px;
                justify-content:space-between;
                align-items: center;
                input{
                    width: 54%; 
                }
                span{
                    display: inline-block;
                    width:40%;
                    cursor: pointer;
                    img{
                        position: relative;
                        // top:15px;
                        // width:90%;
                        height: 50px;
                        margin-left: 30px;
                    }
                }
                
            }
            

        }
        .sendPart{
            width: 48%;
            text-align: center;
            margin:30px auto;
            .sendPhone{
                // width:135px;
                margin-left: 50px;
                font-size: 16px;
                color: #fff;
                background: #7B3D41;
            }
            span.changeSpan{
                color: #7B3D41;
                text-decoration: underline;
                margin-left: 15px;
                cursor: pointer;
            }
        }  
    }
    .verify-send{
      display: flex;
      width:65%;
      height: 50%;
      margin-top: 20%;
      margin-left: 25%;
      background: #fff;
      border:2px solid #7B3D41;
      border-radius: 15px;
      span.text{
        color: #764147;
        font-family: 'Microsoft Yahei';
        font-weight: bold;
        font-size: 20px;
      }
      input.commonBtn{
        height: 41px;
        font-size: 16px;
        font-family: 'Microsoft Yahei';
        color: #fff;
        border-radius: 30px;
        background: #D08B90;
        border:2px solid #fff;
      }
      .content{
          width: 85%;
          height: 80%;
          margin: auto;
          .grayBtn{
            background: #ccc;
          }
          .inputSend{
            text-align: center;
          }
          .codeInput{
              margin-top: 30px;
              
          }
          input{
            &::-webkit-input-placeholder {
              color: #CAB3B4;
            }
          }
          input[type='text']{
            width:50%;
            height: 35px;
            font-size: 16px;
            color: #7B3D41;
            margin-left: 30px;
            color: #CAB3B4;
            margin-left: 15px;
            border-radius: 17px;
            background: #fff;
            border: 1px solid #7B3D41;
          }
          input[type='button']{
            width:30%;
            color: #fff;
            text-indent: 0em;
            text-align: center;
            margin-left: 15px;
            line-height: 35px;
          }
          input.sureBtn{
              line-height: 36px;
              margin:auto;
              background: #7B3D41;
              margin-top: 20px;
          }
      }
      .content-success{
          width: 70%;
          height: 80%;
          margin: auto;
          text-align: center;
          span{
            font-size: 22px;
          }
          .codeInput{
            margin-top:50px;
            input{
                text-indent: 0em;
            }
            .sureBtn{
              width:30%;
              margin-left: 15px;
              &.active{
                background: #78383C;
              }
            }
          }
      }
    }
}
</style>